import React, { useCallback, useEffect } from "react";
import { useRef } from "react";
import { useState } from "react";
import ItemCss from './Item.module.css'
let itW_newValue = {}
function ItemWindow({ title, addOrCancel, itemIdx, target, type }) {
    // const [itemResult,setItemResult] = useState({})
    const [typeCode,setTypeCode] = useState({...{type,title}})
    const iuputControl = useRef(null)
    const keepValue = useCallback((key, value) => {
        itW_newValue[key] = value;
    }, [])
    useEffect(() => {
        const node_HTML = iuputControl.current.childNodes
        if(typeCode.type === 'read'){
            for(let i = 1; i < 5 ; i++ ){
                node_HTML[i].children[0].setAttribute('disabled',null)
            }
            iuputControl.current.chidren
        }else{
            for(let i = 1; i < 5 ; i++ ){
                node_HTML[i].children[0].removeAttribute('disabled')
            }
        } 
    },[typeCode])
    // const setResult = useCallback((itW_newValue)=>{
    //     setItemResult({...itW_newValue})
    // },[])
    return (
        <div style={{
            position: 'fixed',
            top: 0,
            left: 0,
            width: 100 + 'vw',
            height: 100 + 'vw',
            backgroundColor: 'rgb(0,0,0,0.5)',
            zIndex: 1
        }}>
            <div style={{
                backgroundColor: '#fff',
                width: '50vw',
                height: '50vh',
                margin: '25vh  25vw',
                padding: ' 2vh 2vw'
            }}
                ref={iuputControl}
            >
                <h2 style={{fontSize:'3vh'}}><strong>{typeCode.title}</strong></h2>
                
                <p>项目名称：<input className={ItemCss.inputBox}
                    onChange={(e) => {
                        keepValue('name', e.target.value)
                    }} type="text" defaultValue={target?.name} 
                    // style={{ border: typeCode.type==='read'?'1px solid #F5F5F5':'' ,outline:'none' }}
                    /></p>
                <p>官网地址：<input className={ItemCss.inputBox}
                    onChange={(e) => {
                        keepValue('url', e.target.value)
                    }}
                    // onFocus = {(e)=>{e.currentTarget.select();e.target.border='1px solid #F5F5F5' }}
                    type="text" defaultValue={target?.url} 
                    // style={{border: typeCode.type==='read'?'1px solid #F5F5F5':'1px solid #F5F5F5',} }
                    
                    /></p>
                <p>是否可用：
                    <input
                        onChange={(e) => {
                            keepValue('accessibility', e.target.checked ? 1 : 0)
                        }}
                        type="checkbox" 
                        defaultChecked={target?.accessibility ? true : false} 
                    />
                </p>
                <p>项目描述：<input className={ItemCss.inputBox}
                    onChange={(e) => {
                        keepValue('description', e.target.value)
                    }}
                    onFocus = {(e)=>{e.currentTarget.select();   }}
                    type="textarea" defaultValue={target?.description || '无' } 
                    style={{ border: typeCode.type==='read'?'1px solid #F5F5F5':'' ,outline:'none' }}
                    /></p>
                <div
                    style={{
                        marginTop: '2vh'
                    }}
                >
                    {typeCode.type != 'edit' && typeCode.type != 'add' && 
                        <button
                            onClick={() => {
                                setTypeCode({...{type:'edit',title:'编辑'}})
                            }}
                            style={{ cursor: "pointer" }}
                        >编辑</button>}
                    {(typeCode.type === 'edit'||typeCode.type === 'add') &&
                        <button
                            style={{ cursor: "pointer" }}
                            onClick={() => {
                                // setItemResult({...itW_newValue});
                                // setItemResult({...{},...itemResult,...itW_newValue})
                                itW_newValue = { ...target, ...itW_newValue }
                                addOrCancel({ type:typeCode.type, itemResult:itW_newValue, itemIdx })
                                itW_newValue = {}
                            }}
                        >提交</button>
                    }

                    <button
                        style={{ cursor: "pointer" }}
                        onClick={() => {
                            addOrCancel({ type: null, itemIdx })
                            itW_newValue = {}
                        }}>取消</button>
                </div>

            </div>

        </div>
    )
}
export default ItemWindow